Coinbase Chat MCP
by Bichev
Slide 8 Architecture.html•54.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide 8: MCP Architecture Deep Dive</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #fff;
height: 100vh;
overflow: auto;
line-height: 1.4;
}
.slide-container {
max-width: 1600px;
margin: 0 auto;
padding: 40px;
}
.header {
text-align: center;
margin-bottom: 40px;
animation: fadeInDown 0.8s ease-out;
}
.main-title {
font-size: 48px;
font-weight: 700;
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 15px;
line-height: 1.1;
}
.subtitle {
font-size: 20px;
color: #e2e8f0;
font-weight: 400;
opacity: 0;
animation: fadeIn 1s ease-out 0.3s forwards;
}
.evolution-timeline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
.evolution-step {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 16px;
padding: 25px;
backdrop-filter: blur(10px);
animation: slideInUp 1s ease-out both;
position: relative;
}
.evolution-step:nth-child(1) {
animation-delay: 0.3s;
border-top: 4px solid #ef4444;
}
.evolution-step:nth-child(2) {
animation-delay: 0.5s;
border-top: 4px solid #f59e0b;
}
.evolution-step:nth-child(3) {
animation-delay: 0.7s;
border-top: 4px solid #10b981;
}
.evolution-step:nth-child(4) {
animation-delay: 0.9s;
border-top: 4px solid #60a5fa;
}
.step-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.step-number {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #0f172a;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
}
.step-title {
font-size: 24px;
font-weight: 700;
color: #f59e0b;
}
.architecture-diagram {
background: rgba(15, 23, 42, 0.9);
border: 2px solid rgba(148, 163, 184, 0.3);
border-radius: 12px;
padding: 20px;
margin: 20px 0;
text-align: center;
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.diagram-image {
max-width: 100%;
max-height: 250px;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.diagram-image:hover {
transform: scale(1.05);
box-shadow: 0 12px 35px rgba(96, 165, 250, 0.4);
}
.diagram-caption {
font-size: 14px;
color: #94a3b8;
font-style: italic;
}
.problem-solution-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin: 20px 0;
}
.problem-box {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
padding: 15px;
border-radius: 8px;
}
.solution-box {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid #10b981;
padding: 15px;
border-radius: 8px;
}
.box-title {
font-weight: 600;
margin-bottom: 10px;
font-size: 16px;
}
.problem-title { color: #fca5a5; }
.solution-title { color: #86efac; }
.box-content {
font-size: 14px;
color: #e2e8f0;
line-height: 1.5;
}
.pros-cons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.pros-box {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 12px;
padding: 20px;
}
.cons-box {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 12px;
padding: 20px;
}
.pros-title {
color: #10b981;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.cons-title {
color: #ef4444;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.pros-cons-list {
list-style: none;
}
.pros-cons-item {
padding: 8px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
font-size: 14px;
color: #e2e8f0;
}
.pros-cons-item:last-child {
border-bottom: none;
}
.pros-cons-item::before {
content: "•";
margin-right: 8px;
font-weight: bold;
}
.pros-item::before { color: #10b981; }
.cons-item::before { color: #ef4444; }
.code-examples-section {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 16px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 1s ease-out 1.2s both;
}
.section-title {
font-size: 28px;
font-weight: 700;
color: #f59e0b;
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.code-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.code-example {
background: #0f172a;
border: 1px solid #334155;
border-radius: 12px;
overflow: hidden;
}
.code-header {
background: rgba(30, 41, 59, 0.8);
padding: 12px 20px;
border-bottom: 1px solid #334155;
font-weight: 600;
color: #f59e0b;
font-size: 14px;
}
.code-content {
padding: 0;
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
font-size: 12px;
color: #94a3b8;
overflow-x: auto;
line-height: 1.6;
max-height: 300px;
overflow-y: auto;
}
.code-content pre {
margin: 0;
padding: 20px;
background: transparent;
overflow-x: auto;
white-space: pre;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.code-content code {
font-family: inherit;
font-size: inherit;
background: transparent;
padding: 0;
color: inherit;
}
.code-comment { color: #64748b; }
.code-keyword { color: #c084fc; }
.code-string { color: #86efac; }
.code-function { color: #60a5fa; }
.code-property { color: #fbbf24; }
.code-value { color: #f472b6; }
.business-impact {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #0f172a;
padding: 30px;
border-radius: 16px;
text-align: center;
font-weight: 700;
box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
animation: slideUp 0.8s ease-out 1.5s both;
margin-top: 30px;
}
.impact-title {
font-size: 32px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.impact-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 25px;
}
.impact-metric {
background: rgba(15, 23, 42, 0.8);
color: white;
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(251, 191, 36, 0.3);
}
.metric-value {
font-size: 28px;
font-weight: 700;
color: #fbbf24;
display: block;
margin-bottom: 8px;
}
.metric-label {
font-size: 13px;
color: #e2e8f0;
line-height: 1.3;
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.tech-specs {
background: rgba(15, 23, 42, 0.8);
border-radius: 12px;
padding: 20px;
margin: 20px 0;
}
.spec-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
font-size: 14px;
}
.spec-item:last-child { border-bottom: none; }
.spec-label {
color: #94a3b8;
font-weight: 500;
}
.spec-value {
color: #10b981;
font-weight: 600;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
}
.modal-content {
margin: 2% auto;
display: block;
width: 90%;
max-width: 1200px;
max-height: 90%;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.modal-close {
position: absolute;
top: 20px;
right: 35px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 1001;
transition: color 0.3s ease;
}
.modal-close:hover {
color: #60a5fa;
}
.modal-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #e2e8f0;
padding: 20px 0;
font-size: 16px;
}
/* Reference Materials Section */
.reference-materials {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 16px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 1s ease-out 1.4s both;
}
.reference-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 25px;
margin-top: 25px;
}
.reference-category {
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 20px;
}
.category-title {
font-size: 18px;
font-weight: 700;
color: #f59e0b;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.reference-links {
list-style: none;
}
.reference-link {
padding: 8px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.reference-link:last-child {
border-bottom: none;
}
.reference-link a {
color: #60a5fa;
text-decoration: none;
font-size: 14px;
line-height: 1.4;
transition: color 0.3s ease;
}
.reference-link a:hover {
color: #93c5fd;
text-decoration: underline;
}
.enterprise-patterns {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
border-top: 4px solid #a78bfa;
}
</style>
</head>
<body>
<div class="slide-container">
<div class="header">
<h1 class="main-title">MCP Architecture Evolution</h1>
<p class="subtitle">From REST API Limitations to Intelligent Agent Integration</p>
</div>
<div class="evolution-timeline">
<!-- Step 1: REST API Standard -->
<div class="evolution-step">
<div class="step-header">
<div class="step-number">1</div>
<div class="step-title">REST API Standard</div>
</div>
<div class="architecture-diagram">
<img src="../static/1 REST API Standard.png" alt="REST API Standard Architecture" class="diagram-image" onclick="openModal(this)">
<div class="diagram-caption">Traditional REST API Architecture</div>
</div>
<div class="problem-solution-grid">
<div class="problem-box">
<div class="box-title problem-title">🚨 Core Problems</div>
<div class="box-content">
• Static, predefined endpoints<br>
• Complex integration requirements<br>
• Poor AI/LLM compatibility<br>
• Manual API discovery process<br>
• Inconsistent data formats
</div>
</div>
<div class="solution-box">
<div class="box-title solution-title">⚙️ Technical Specs</div>
<div class="box-content">
• HTTP-based communication<br>
• JSON/XML data exchange<br>
• CRUD operations (GET, POST, PUT, DELETE)<br>
• Stateless architecture<br>
• OpenAPI documentation
</div>
</div>
</div>
<div class="pros-cons-grid">
<div class="pros-box">
<div class="pros-title">✅ Advantages</div>
<ul class="pros-cons-list">
<li class="pros-cons-item pros-item">Widely adopted standard</li>
<li class="pros-cons-item pros-item">Simple HTTP-based protocol</li>
<li class="pros-cons-item pros-item">Good caching mechanisms</li>
<li class="pros-cons-item pros-item">Mature tooling ecosystem</li>
</ul>
</div>
<div class="cons-box">
<div class="cons-title">❌ Limitations</div>
<ul class="pros-cons-list">
<li class="pros-cons-item cons-item">No AI-native capabilities</li>
<li class="pros-cons-item cons-item">Complex multi-API orchestration</li>
<li class="pros-cons-item cons-item">Static endpoint definitions</li>
<li class="pros-cons-item cons-item">Poor discoverability</li>
</ul>
</div>
</div>
</div>
<!-- Step 2: LLM Limitations -->
<div class="evolution-step">
<div class="step-header">
<div class="step-number">2</div>
<div class="step-title">LLM & Agentic AI Limitations</div>
</div>
<div class="architecture-diagram">
<img src="../static/2 LLM and Agentic AI Limitations.png" alt="LLM Limitations" class="diagram-image" onclick="openModal(this)">
<div class="diagram-caption">Current LLM Integration Challenges</div>
</div>
<div class="problem-solution-grid">
<div class="problem-box">
<div class="box-title problem-title">🔥 Critical Issues</div>
<div class="box-content">
• Inability to access external data<br>
• No tool execution capabilities<br>
• Context window limitations<br>
• Static knowledge cutoffs<br>
• Complex tool integration
</div>
</div>
<div class="solution-box">
<div class="box-title solution-title">📊 Impact Metrics</div>
<div class="box-content">
• 83% of AI projects fail integration<br>
• 6+ months average API setup<br>
• $50B+ integration market<br>
• 1000+ APIs per enterprise<br>
• 40% IT budget on integration
</div>
</div>
</div>
<div class="tech-specs">
<div class="spec-item">
<span class="spec-label">Current LLM Capability:</span>
<span class="spec-value">Text Generation Only</span>
</div>
<div class="spec-item">
<span class="spec-label">Tool Access:</span>
<span class="spec-value">Manual Integration Required</span>
</div>
<div class="spec-item">
<span class="spec-label">Data Freshness:</span>
<span class="spec-value">Static Training Data</span>
</div>
<div class="spec-item">
<span class="spec-label">Integration Complexity:</span>
<span class="spec-value">High (Custom Development)</span>
</div>
</div>
</div>
<!-- Step 3: MCP Agent Architecture -->
<div class="evolution-step">
<div class="step-header">
<div class="step-number">3</div>
<div class="step-title">MCP Agent Architecture</div>
</div>
<div class="architecture-diagram">
<img src="../static/3 Agents with MCP Architecture.png" alt="MCP Agent Architecture" class="diagram-image" onclick="openModal(this)">
<div class="diagram-caption">Model Context Protocol Agent Integration</div>
</div>
<div class="problem-solution-grid">
<div class="solution-box">
<div class="box-title solution-title">🚀 Key Innovations</div>
<div class="box-content">
• Standardized protocol for AI integration<br>
• Dynamic tool discovery<br>
• Real-time data access<br>
• Secure client-server architecture<br>
• Universal API abstraction
</div>
</div>
<div class="solution-box">
<div class="box-title solution-title">⚡ Core Benefits</div>
<div class="box-content">
• 90% reduction in integration time<br>
• Plug-and-play server ecosystem<br>
• Standardized security model<br>
• Multi-modal support<br>
• Protocol-level optimization
</div>
</div>
</div>
<div class="tech-specs">
<div class="spec-item">
<span class="spec-label">Protocol:</span>
<span class="spec-value">JSON-RPC 2.0</span>
</div>
<div class="spec-item">
<span class="spec-label">Transport:</span>
<span class="spec-value">Stdio, HTTP/SSE</span>
</div>
<div class="spec-item">
<span class="spec-label">Discovery:</span>
<span class="spec-value">Dynamic Capability Detection</span>
</div>
<div class="spec-item">
<span class="spec-label">Security:</span>
<span class="spec-value">Client-Controlled Access</span>
</div>
</div>
</div>
<!-- Step 4: Detailed MCP Architecture -->
<div class="evolution-step">
<div class="step-header">
<div class="step-number">4</div>
<div class="step-title">MCP Detailed Architecture</div>
</div>
<div class="architecture-diagram">
<img src="../static/4 MCP Detailed Architecture.png" alt="MCP Detailed Architecture" class="diagram-image" onclick="openModal(this)">
<div class="diagram-caption">Complete MCP Protocol Stack</div>
</div>
<div class="problem-solution-grid">
<div class="solution-box">
<div class="box-title solution-title">🔧 Technical Components</div>
<div class="box-content">
• Protocol Layer (JSON-RPC 2.0)<br>
• Transport Layer (Stdio/HTTP)<br>
• Resource Management<br>
• Tool Execution Engine<br>
• Prompt Template System
</div>
</div>
<div class="solution-box">
<div class="box-title solution-title">🛡️ Enterprise Features</div>
<div class="box-content">
• Message validation & schemas<br>
• Error handling & recovery<br>
• Progress reporting<br>
• Connection lifecycle management<br>
• Security & authentication
</div>
</div>
</div>
<div class="pros-cons-grid">
<div class="pros-box">
<div class="pros-title">🎯 MCP Advantages</div>
<ul class="pros-cons-list">
<li class="pros-cons-item pros-item">Universal AI integration standard</li>
<li class="pros-cons-item pros-item">Dynamic capability discovery</li>
<li class="pros-cons-item pros-item">Multi-modal resource support</li>
<li class="pros-cons-item pros-item">Built-in security model</li>
<li class="pros-cons-item pros-item">Ecosystem of pre-built servers</li>
</ul>
</div>
<div class="cons-box">
<div class="cons-title">⚠️ Implementation Considerations</div>
<ul class="pros-cons-list">
<li class="pros-cons-item cons-item">New protocol adoption curve</li>
<li class="pros-cons-item cons-item">Initial server development effort</li>
<li class="pros-cons-item cons-item">Client compatibility requirements</li>
<li class="pros-cons-item cons-item">Protocol version management</li>
</ul>
</div>
</div>
</div>
</div>
<!-- MCP Code Examples Section -->
<div class="code-examples-section">
<div class="section-title">
<span>💻</span>
Complete MCP Implementation Workflow
</div>
<div class="code-grid">
<!-- MCP Server with Tools -->
<div class="code-example">
<div class="code-header">🔧 MCP Server with Tools</div>
<div class="code-content">
<pre><code><span class="code-comment">// TypeScript MCP Server Implementation</span>
<span class="code-keyword">import</span> { <span class="code-function">Server</span> } <span class="code-keyword">from</span> <span class="code-string">"@modelcontextprotocol/sdk/server"</span>;
<span class="code-keyword">const</span> <span class="code-function">server</span> = <span class="code-keyword">new</span> <span class="code-function">Server</span>({
<span class="code-property">name</span>: <span class="code-string">"enterprise-server"</span>,
<span class="code-property">version</span>: <span class="code-string">"1.0.0"</span>
}, {
<span class="code-property">capabilities</span>: {
<span class="code-property">tools</span>: {},
<span class="code-property">resources</span>: {},
<span class="code-property">prompts</span>: {}
}
});
<span class="code-comment">// Define enterprise tools</span>
<span class="code-function">server</span>.<span class="code-function">setRequestHandler</span>(<span class="code-function">ListToolsRequestSchema</span>,
<span class="code-keyword">async</span> () => {
<span class="code-keyword">return</span> {
<span class="code-property">tools</span>: [{
<span class="code-property">name</span>: <span class="code-string">"execute_sql_query"</span>,
<span class="code-property">description</span>: <span class="code-string">"Execute database queries"</span>,
<span class="code-property">inputSchema</span>: {
<span class="code-property">type</span>: <span class="code-string">"object"</span>,
<span class="code-property">properties</span>: {
<span class="code-property">query</span>: { <span class="code-property">type</span>: <span class="code-string">"string"</span> },
<span class="code-property">database</span>: { <span class="code-property">type</span>: <span class="code-string">"string"</span> }
}
}
}]
};
});</code></pre>
</div>
</div>
<!-- MCP Resource Management -->
<div class="code-example">
<div class="code-header">📁 Resource Management</div>
<div class="code-content">
<pre><code><span class="code-comment"># Python MCP Resource Implementation</span>
<span class="code-keyword">from</span> <span class="code-function">mcp.server</span> <span class="code-keyword">import</span> <span class="code-function">Server</span>
<span class="code-keyword">import</span> <span class="code-function">mcp.types</span> <span class="code-keyword">as</span> <span class="code-function">types</span>
<span class="code-function">app</span> = <span class="code-function">Server</span>(<span class="code-string">"enterprise-server"</span>)
<span class="code-keyword">@app.list_resources()</span>
<span class="code-keyword">async def</span> <span class="code-function">list_resources</span>() -> <span class="code-function">list</span>[<span class="code-function">types.Resource</span>]:
<span class="code-keyword">return</span> [
<span class="code-function">types.Resource</span>(
<span class="code-property">uri</span>=<span class="code-string">"database://customers/table"</span>,
<span class="code-property">name</span>=<span class="code-string">"Customer Database"</span>,
<span class="code-property">mimeType</span>=<span class="code-string">"application/json"</span>
),
<span class="code-function">types.Resource</span>(
<span class="code-property">uri</span>=<span class="code-string">"file:///logs/app.log"</span>,
<span class="code-property">name</span>=<span class="code-string">"Application Logs"</span>,
<span class="code-property">mimeType</span>=<span class="code-string">"text/plain"</span>
)
]
<span class="code-keyword">@app.read_resource()</span>
<span class="code-keyword">async def</span> <span class="code-function">read_resource</span>(<span class="code-property">uri</span>: <span class="code-function">AnyUrl</span>) -> <span class="code-function">str</span>:
<span class="code-keyword">if</span> <span class="code-function">str</span>(<span class="code-property">uri</span>) == <span class="code-string">"database://customers/table"</span>:
<span class="code-property">data</span> = <span class="code-keyword">await</span> <span class="code-function">fetch_customer_data</span>()
<span class="code-keyword">return</span> <span class="code-function">json.dumps</span>(<span class="code-property">data</span>)</code></pre>
</div>
</div>
<!-- MCP Prompt Templates -->
<div class="code-example">
<div class="code-header">📝 Prompt Templates</div>
<div class="code-content">
<pre><code><span class="code-comment">// MCP Prompt Implementation</span>
<span class="code-keyword">const</span> <span class="code-value">ENTERPRISE_PROMPTS</span> = {
<span class="code-string">"analyze-logs"</span>: {
<span class="code-property">name</span>: <span class="code-string">"analyze-logs"</span>,
<span class="code-property">description</span>: <span class="code-string">"Analyze system logs for issues"</span>,
<span class="code-property">arguments</span>: [
{
<span class="code-property">name</span>: <span class="code-string">"timeframe"</span>,
<span class="code-property">description</span>: <span class="code-string">"Time period to analyze"</span>,
<span class="code-property">required</span>: <span class="code-value">true</span>
}
]
}
};
<span class="code-function">server</span>.<span class="code-function">setRequestHandler</span>(<span class="code-function">GetPromptRequestSchema</span>,
<span class="code-keyword">async</span> (<span class="code-property">request</span>) => {
<span class="code-keyword">const</span> <span class="code-property">prompt</span> = <span class="code-value">ENTERPRISE_PROMPTS</span>[<span class="code-property">request</span>.<span class="code-property">params</span>.<span class="code-property">name</span>];
<span class="code-keyword">if</span> (<span class="code-property">request</span>.<span class="code-property">params</span>.<span class="code-property">name</span> === <span class="code-string">"analyze-logs"</span>) {
<span class="code-keyword">return</span> {
<span class="code-property">messages</span>: [{
<span class="code-property">role</span>: <span class="code-string">"user"</span>,
<span class="code-property">content</span>: {
<span class="code-property">type</span>: <span class="code-string">"text"</span>,
<span class="code-property">text</span>: <span class="code-string">`Analyze logs for: <span class="code-value">${request.params.arguments?.timeframe}</span>`</span>
}
}]
};
}
});</code></pre>
</div>
</div>
<!-- MCP Protocol Communication -->
<div class="code-example">
<div class="code-header">🔄 Protocol Communication</div>
<div class="code-content">
<pre><code><span class="code-comment">// MCP Client-Server Communication</span>
<span class="code-keyword">class</span> <span class="code-function">MCPProtocol</span> {
<span class="code-comment">// Initialize connection</span>
<span class="code-keyword">async</span> <span class="code-function">initialize</span>() {
<span class="code-keyword">const</span> <span class="code-property">request</span> = {
<span class="code-property">method</span>: <span class="code-string">"initialize"</span>,
<span class="code-property">params</span>: {
<span class="code-property">protocolVersion</span>: <span class="code-string">"2024-11-05"</span>,
<span class="code-property">capabilities</span>: {
<span class="code-property">tools</span>: {}, <span class="code-property">resources</span>: {}, <span class="code-property">prompts</span>: {}
},
<span class="code-property">clientInfo</span>: {
<span class="code-property">name</span>: <span class="code-string">"enterprise-client"</span>,
<span class="code-property">version</span>: <span class="code-string">"1.0.0"</span>
}
}
};
<span class="code-keyword">const</span> <span class="code-property">response</span> = <span class="code-keyword">await</span> <span class="code-keyword">this</span>.<span class="code-function">sendRequest</span>(<span class="code-property">request</span>);
<span class="code-keyword">await</span> <span class="code-keyword">this</span>.<span class="code-function">sendNotification</span>({
<span class="code-property">method</span>: <span class="code-string">"initialized"</span>
});
}
<span class="code-comment">// Execute tool with progress reporting</span>
<span class="code-keyword">async</span> <span class="code-function">callTool</span>(<span class="code-property">name</span>, <span class="code-property">arguments</span>) {
<span class="code-keyword">return</span> <span class="code-keyword">await</span> <span class="code-keyword">this</span>.<span class="code-function">sendRequest</span>({
<span class="code-property">method</span>: <span class="code-string">"tools/call"</span>,
<span class="code-property">params</span>: { <span class="code-property">name</span>, <span class="code-property">arguments</span> }
});
}
}</code></pre>
</div>
</div>
<!-- MCP Tool API Execution -->
<div class="code-example">
<div class="code-header">🌐 MCP Tool API Execution</div>
<div class="code-content">
<pre><code><span class="code-comment">// Tool Implementation with External API</span>
<span class="code-function">server</span>.<span class="code-function">setRequestHandler</span>(<span class="code-function">CallToolRequestSchema</span>,
<span class="code-keyword">async</span> (<span class="code-property">request</span>) => {
<span class="code-keyword">if</span> (<span class="code-property">request</span>.<span class="code-property">params</span>.<span class="code-property">name</span> === <span class="code-string">"execute_sql_query"</span>) {
<span class="code-keyword">const</span> { <span class="code-property">query</span>, <span class="code-property">database</span> } = <span class="code-property">request</span>.<span class="code-property">params</span>.<span class="code-property">arguments</span>;
<span class="code-keyword">try</span> {
<span class="code-comment">// Execute database query via API</span>
<span class="code-keyword">const</span> <span class="code-property">response</span> = <span class="code-keyword">await</span> <span class="code-function">fetch</span>(<span class="code-string">`/api/databases/<span class="code-value">${database}</span>/query`</span>, {
<span class="code-property">method</span>: <span class="code-string">"POST"</span>,
<span class="code-property">headers</span>: {
<span class="code-string">"Content-Type"</span>: <span class="code-string">"application/json"</span>,
<span class="code-string">"Authorization"</span>: <span class="code-string">`Bearer <span class="code-value">${process.env.DB_TOKEN}</span>`</span>
},
<span class="code-property">body</span>: <span class="code-function">JSON.stringify</span>({ <span class="code-property">query</span> })
});
<span class="code-keyword">const</span> <span class="code-property">data</span> = <span class="code-keyword">await</span> <span class="code-property">response</span>.<span class="code-function">json</span>();
<span class="code-keyword">return</span> {
<span class="code-property">content</span>: [{
<span class="code-property">type</span>: <span class="code-string">"text"</span>,
<span class="code-property">text</span>: <span class="code-string">`Query executed successfully.
Results: <span class="code-value">${JSON.stringify(data, null, 2)}</span>`</span>
}]
};
} <span class="code-keyword">catch</span> (<span class="code-property">error</span>) {
<span class="code-keyword">return</span> {
<span class="code-property">content</span>: [{
<span class="code-property">type</span>: <span class="code-string">"text"</span>,
<span class="code-property">text</span>: <span class="code-string">`Error: <span class="code-value">${error.message}</span>`</span>
}],
<span class="code-property">isError</span>: <span class="code-value">true</span>
};
}
}
});</code></pre>
</div>
</div>
<!-- LLM Connection Setup -->
<div class="code-example">
<div class="code-header">🤖 LLM Connection Setup</div>
<div class="code-content">
<pre><code><span class="code-comment">// Connect LLM to MCP Server</span>
<span class="code-keyword">import</span> { <span class="code-function">Client</span> } <span class="code-keyword">from</span> <span class="code-string">"@modelcontextprotocol/sdk/client"</span>;
<span class="code-keyword">import</span> { <span class="code-function">StdioClientTransport</span> } <span class="code-keyword">from</span> <span class="code-string">"@modelcontextprotocol/sdk/client/stdio"</span>;
<span class="code-keyword">class</span> <span class="code-function">LLMWithMCP</span> {
<span class="code-keyword">constructor</span>() {
<span class="code-keyword">this</span>.<span class="code-property">mcpClient</span> = <span class="code-keyword">new</span> <span class="code-function">Client</span>({
<span class="code-property">name</span>: <span class="code-string">"enterprise-llm"</span>,
<span class="code-property">version</span>: <span class="code-string">"1.0.0"</span>
}, {
<span class="code-property">capabilities</span>: {
<span class="code-property">tools</span>: {}
}
});
}
<span class="code-keyword">async</span> <span class="code-function">connectToMCPServer</span>(<span class="code-property">serverPath</span>) {
<span class="code-keyword">const</span> <span class="code-property">transport</span> = <span class="code-keyword">new</span> <span class="code-function">StdioClientTransport</span>({
<span class="code-property">command</span>: <span class="code-string">"node"</span>,
<span class="code-property">args</span>: [<span class="code-property">serverPath</span>]
});
<span class="code-keyword">await</span> <span class="code-keyword">this</span>.<span class="code-property">mcpClient</span>.<span class="code-function">connect</span>(<span class="code-property">transport</span>);
<span class="code-comment">// Get available tools</span>
<span class="code-keyword">const</span> <span class="code-property">tools</span> = <span class="code-keyword">await</span> <span class="code-keyword">this</span>.<span class="code-property">mcpClient</span>.<span class="code-function">listTools</span>();
<span class="code-function">console.log</span>(<span class="code-string">"Available tools:"</span>, <span class="code-property">tools</span>);
<span class="code-keyword">return</span> <span class="code-property">tools</span>;
}
<span class="code-keyword">async</span> <span class="code-function">executeWithTools</span>(<span class="code-property">prompt</span>) {
<span class="code-comment">// LLM processes prompt and decides to use tools</span>
<span class="code-keyword">const</span> <span class="code-property">result</span> = <span class="code-keyword">await</span> <span class="code-keyword">this</span>.<span class="code-property">mcpClient</span>.<span class="code-function">callTool</span>({
<span class="code-property">name</span>: <span class="code-string">"execute_sql_query"</span>,
<span class="code-property">arguments</span>: {
<span class="code-property">query</span>: <span class="code-string">"SELECT * FROM customers LIMIT 10"</span>,
<span class="code-property">database</span>: <span class="code-string">"production"</span>
}
});
<span class="code-keyword">return</span> <span class="code-property">result</span>;
}
}</code></pre>
</div>
</div>
</div>
</div>
<!-- Reference Materials Section -->
<div class="reference-materials">
<div class="section-title">
<span>📚</span>
Reference Materials & Enterprise Resources
</div>
<div class="reference-grid">
<!-- Official MCP Resources -->
<div class="reference-category">
<div class="category-title">
<span>🏛️</span>
Official MCP Resources
</div>
<ul class="reference-links">
<li class="reference-link">
<a href="https://github.com/modelcontextprotocol" target="_blank">Official Repository</a>
</li>
<li class="reference-link">
<a href="https://modelcontextprotocol.io/introduction" target="_blank">Official Introduction</a>
</li>
<li class="reference-link">
<a href="https://github.com/modelcontextprotocol/servers" target="_blank">Official Servers</a>
</li>
<li class="reference-link">
<a href="https://modelcontextprotocol.io/clients" target="_blank">Official Clients</a>
</li>
<li class="reference-link">
<a href="https://github.com/modelcontextprotocol/inspector" target="_blank">MCP Inspector Tool</a>
</li>
</ul>
</div>
<!-- Community & Aggregators -->
<div class="reference-category">
<div class="category-title">
<span>🌐</span>
Community & Aggregators
</div>
<ul class="reference-links">
<li class="reference-link">
<a href="https://docs.cursor.com/tools" target="_blank">Cursor Tools List</a>
</li>
<li class="reference-link">
<a href="https://github.com/punkpeye/awesome-mcp-servers" target="_blank">Awesome MCP Servers (3500+)</a>
</li>
<li class="reference-link">
<a href="https://github.com/punkpeye/awesome-mcp-clients" target="_blank">Awesome MCP Clients</a>
</li>
<li class="reference-link">
<a href="https://www.apollographql.com/docs" target="_blank">MCP GraphQL Server by Apollo</a>
</li>
</ul>
</div>
<!-- Microsoft & Azure -->
<div class="reference-category">
<div class="category-title">
<span>☁️</span>
Microsoft & Azure
</div>
<ul class="reference-links">
<li class="reference-link">
<a href="https://azure-samples.github.io/AI-Gateway/" target="_blank">Azure AI Gateway</a>
</li>
<li class="reference-link">
<a href="https://github.com/Azure-Samples/AI-Gateway/tree/main" target="_blank">Azure AI Gateway Samples</a>
</li>
<li class="reference-link">
<a href="https://github.com/microsoft/azure-devops-mcp/tree/main" target="_blank">Azure DevOps MCP</a>
</li>
<li class="reference-link">
<a href="https://github.com/microsoft/mcp-for-beginners" target="_blank">Microsoft MCP for Beginners</a>
</li>
</ul>
</div>
<!-- Enterprise Security & Discovery -->
<div class="reference-category">
<div class="category-title">
<span>🔒</span>
Security & Discovery
</div>
<ul class="reference-links">
<li class="reference-link">
<a href="https://genai.owasp.org/resource/agent-name-service-ans-for-secure-al-agent-discovery-v1-0/" target="_blank">OWASP Agent Name Service</a>
</li>
<li class="reference-link">
<a href="https://github.com/kenhuangus/dns-for-agents/" target="_blank">DNS for Agents</a>
</li>
<li class="reference-link">
<a href="https://www.infoq.com/news/2025/06/secure-agent-discovery-ans/" target="_blank">InfoQ Security Review</a>
</li>
</ul>
</div>
<!-- AI Gateways & Solutions -->
<div class="reference-category">
<div class="category-title">
<span>🚀</span>
AI Gateways & Solutions
</div>
<ul class="reference-links">
<li class="reference-link">
<a href="https://higress.ai/en/" target="_blank">MCP & AI Gateway by Higress</a>
</li>
<li class="reference-link">
<a href="https://glama.ai/mcp" target="_blank">MCP & AI Gateway by Glama</a>
</li>
<li class="reference-link">
<a href="https://www.instantmcp.com" target="_blank">Instant MCP</a>
</li>
</ul>
</div>
<!-- Enterprise Deployment -->
<div class="reference-category enterprise-patterns">
<div class="category-title">
<span>🏢</span>
Enterprise Deployment
</div>
<ul class="reference-links">
<li class="reference-link">
<a href="https://mcp-use.com" target="_blank">MCP-USE: Build & Deploy Agents</a>
</li>
<li class="reference-link">
<a href="https://github.com/mcp-use/mcp-use?tab=readme-ov-file" target="_blank">MCP-USE: Connect LLM to MCP</a>
</li>
<li class="reference-link">
<span style="color: #86efac;">• Security & Orchestration</span>
</li>
<li class="reference-link">
<span style="color: #86efac;">• Management & Discovery</span>
</li>
<li class="reference-link">
<span style="color: #86efac;">• CI/CD Pipeline Integration</span>
</li>
<li class="reference-link">
<span style="color: #86efac;">• MCP Proxy & Lifecycle Mgmt</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Business Impact Section -->
<!-- <div class="business-impact">
<div class="impact-title">
<span>📈</span>
MCP Business Impact & ROI
</div>
<div class="impact-metrics">
<div class="impact-metric">
<span class="metric-value">90%</span>
<span class="metric-label">Reduction in Integration Time</span>
</div>
<div class="impact-metric">
<span class="metric-value">$10M</span>
<span class="metric-label">Cost Savings per Enterprise</span>
</div>
<div class="impact-metric">
<span class="metric-value">6 months</span>
<span class="metric-label">Faster Time to Market</span>
</div>
<div class="impact-metric">
<span class="metric-value">85%</span>
<span class="metric-label">Developer Productivity Gain</span>
</div>
</div>
</div> -->
</div>
<!-- Modal for Image Viewing -->
<div id="imageModal" class="modal">
<span class="modal-close" onclick="closeModal()">×</span>
<img class="modal-content" id="modalImage">
<div id="modalCaption" class="modal-caption"></div>
</div>
<script>
function openModal(img) {
const modal = document.getElementById("imageModal");
const modalImg = document.getElementById("modalImage");
const caption = document.getElementById("modalCaption");
modal.style.display = "block";
modalImg.src = img.src;
caption.innerHTML = img.alt;
// Prevent body scroll when modal is open
document.body.style.overflow = "hidden";
}
function closeModal() {
const modal = document.getElementById("imageModal");
modal.style.display = "none";
// Restore body scroll
document.body.style.overflow = "auto";
}
// Close modal when clicking outside the image
window.onclick = function(event) {
const modal = document.getElementById("imageModal");
if (event.target == modal) {
closeModal();
}
}
// Close modal with Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Bichev/coinbase-chat-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server